<template>
  <div class="pay-order">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>支付订单</span>
    </div>
    <div class="payment-info">
      <div class="amount">
        <span>支付金额</span>
        <span>支付剩余时间: {{ formatTime(remainTime) }}</span>
      </div>
      <div class="price">
        <span style="color: #f44; font-size: 24px">￥{{ paymentAmount }}</span>
      </div>
      <div class="product-desc">
        【经典套机】28-70mm标准套装/黑色
      </div>
    </div>
    <div class="payment-method">
      <h3>选择支付方式</h3>
      <van-radio-group v-model="selectedPaymentMethod">
        <van-radio name="alipay">
          <van-icon name="alipay-o" />
          <span>支付宝</span>
        </van-radio>
        <van-radio name="wechat">
          <van-icon name="wechat-o" />
          <span>微信</span>
        </van-radio>
        <van-radio name="bankCard">
          <van-icon name="credit-card-o" />
          <span>招商银行卡支付</span>
          <span class="card-number">**** **** **** 3570</span>
        </van-radio>
      </van-radio-group>
    </div>
    <van-button type="primary" block @click="confirmPayment">确认支付</van-button>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
// 模拟支付金额
const paymentAmount = ref(4500);
// 模拟支付剩余时间（单位：秒）
const remainTime = ref(60 * 1 + 6 * 1 + 9);
// 选择的支付方式
const selectedPaymentMethod = ref('alipay');

// 格式化时间
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
  const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
  const secondsPart = (seconds % 60).toString().padStart(2, '0');
  return `${hours}:${minutes}:${secondsPart}`;
};

// 倒计时
const startCountdown = () => {
  const intervalId = setInterval(() => {
    remainTime.value--;
    if (remainTime.value < 0) {
      clearInterval(intervalId);
      Toast.fail('支付时间已过期');
    }
  }, 1000);
};

// 返回上一页
const goBack = () => {
  // 这里可使用路由跳转回上一页，假设使用vue-router
  // 先引入router
  // import { useRouter } from 'vue-router';
  // const router = useRouter();
  // router.back();
  console.log('返回上一页');
};

// 确认支付
const confirmPayment = () => {
//   Toast.success('支付成功');
//   // 这里可添加实际支付的逻辑，如发送axios请求到后端接口
//   console.log('确认支付，支付方式:', selectedPaymentMethod.value);
router.push('/PaymentResult');
};

onMounted(() => {
  startCountdown();
});
</script>

<style scoped>
.pay-order {
  padding: 16px;
  background-color: #f5f5f5;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.payment-info {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.price {
  text-align: right;
}
.product-desc {
  color: #666;
}
.payment-method {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.payment-method h3 {
  margin-bottom: 8px;
  color: #666;
}
.card-number {
  color: #999;
  font-size: 14px;
}
</style>